<template>
  <Header :activeIndex="activeIndex" />
  <div id="search-container">
    <el-input class="search-input" placeholder="请输入店铺名"  v-model="searchParams.shopName" :prefix-icon="Search"/>
    <el-button class="search-button" @click="searchList" type="primary"><el-icon><Search /></el-icon>搜索</el-button>
    <el-tag class="collect" @click="toCollectList()">
      <el-icon><GoodsFilled /></el-icon>
      <span class="text-large font-600 mr-3">我收藏的店铺</span>
    </el-tag>
  </div>
  <div id="shop-list">
    <el-row class="shop-box">
    <el-col style="display: flex; flex-wrap: wrap;">
      <el-card v-for="(item, index) in shopList" :key="index" class="shop-card" :body-style="{ padding: '0px'}">
        <img
          :src="item.cover"
          class="image"
        />
        <div style="padding: 14px;">
          <span style="font-weight: bold">{{ item.name }}</span>
          <div class="bottom">
            <div class="address">{{ item.address }}</div>
            <div class="address">{{ item.contact }}</div>
            <el-button style="margin-top: 10px;" type="warning" @click="detailLink(item.id)">进入店铺</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-pagination
  class="page"
          v-model:current-page="searchParams.pageNum"
          v-model:page-size="searchParams.pageSize"
          :page-sizes="[8, 16, 24, 32]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="parseInt(totalItems)"
          @size-change="searchList"
          @current-change="searchList"
    />
  </div>
  <Footer/>
</template>

<script>
import Header from '@/views/front/Header.vue'
import Footer from '@/views/front/Footer.vue'
import { Search } from '@element-plus/icons-vue'
import { ref, reactive, toRefs } from 'vue'
import { listApi } from '@/api/shop-list'
import { useRouter } from 'vue-router'
export default {
    components: {
    Header,
    Footer
  },
  setup() {
    const activeIndex = ref('2')
    const currentDate = ref(new Date())
    const shopData = reactive({
      searchParams: {
        pageNum: 1,
        pageSize: 8,
        shopName: ''
      },
      totalItems: '',
      shopList: []
    })

    const router = useRouter()
    const searchList = () => {
      listApi(shopData.searchParams).then((res) => {
        if (res.data) {
          shopData.shopList = res.data.content
          shopData.totalItems = res.data.totalSize
        }
      })
    }
    const detailLink = (id) => {
      router.push({
        name: 'shop-detail',
        params: { id: id }
      })
    }
    searchList()
    return {
      activeIndex,
      currentDate,
      Search,
      ...toRefs(shopData),
      searchList,
      detailLink,
      router
    }
  },
  methods: {
    toCollectList(){
      this.router.push({
        name: 'collect-list'
      })
    }
}
}
</script>

<style lang="scss" scoped>
#search-container{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
}
#search-container .search-input{
  width: 30%;
}
#search-container .search-button{
  margin-left: 5px;
}
#shop-list .shop-box{
    padding: 0 80px;
}
#shop-list .shop-card{
    width: 20%;
    margin: 20px;
}
#shop-list .address {
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
}

#shop-list .bottom {
  margin-top: 13px;
  display: flex;
  flex-direction: column;
}

#shop-list .image {
  width: 100%;
  height: 200px;
  display: block;
}
#shop-list .page{
  justify-content: end;
  margin: 50px;
}
#search-container .collect{
  margin-left: 10px;
}
</style>
